<template>
	<view class="main" @click="toDetail">
		<view style="display: flex; align-items:flex-end">
			<span class="proName">{{ccollectData.name}}</span>
		</view>
		<span
			style="float: right; margin-top: -70rpx; margin-right:-20rpx ; color: #1890ff;">￥{{ccollectData.settlement_price}}</span>
		<view class="project u-line-1">
			<span class="label">
				<u-icon name="account"></u-icon> 岗位
			</span>
			<span class="detail">{{getPostNameFromArray(ccollectData.position).toString()}}</span>
		</view>
		<view class="project">
			<span class="label">
				<u-icon name="calendar"></u-icon> 周期
			</span>
			<span class="detail" style="margin-bottom: 100rpx;">{{ccollectData.cycle}}个{{ccollectData.cycle_unit_text}}</span>
			<span v-show="show" class="view" @click.stop="cencelCllect">
				<u-icon name="star-fill" size="30" color="#facc14"></u-icon>
				取消收藏
			</span>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			ccollectData: Object
		},
		data() {
			return {
				show: true,
			}
		},
		methods: {
			// 获取岗位名称
			getPostNameFromArray(arr) {
				return arr.map(item => item.name)
			},
			toDetail() {
				// this.$u.route("/pages/list/proDetail/proDetail", {
				// 	id: this.ccollectData.id
				// })
				this.$Router.push({
					path: "/x",
					query: {
						id: this.ccollectData.id
					}
				})
			},
			// 收藏商品
			cencelCllect() {
				this.$u.api.CollectionProject({
					project_id: this.ccollectData.id
				}).then(res => {
					if (res.code == 1) {
						this.show = res.collection
					} else {
						this.$u.toast("网络错误，请重新点击！")
					}
				})
			},
		}

	}
</script>

<style scoped lang="scss">
	.main {
		height: 400px;
		background-image: url(../../../static/proList.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 40rpx 50rpx;
		margin-bottom: 20rpx;

	}

	.proName {
		font-size: 36rpx;
		color: rgba(0, 0, 0, .7);
		font-weight: 600;
	}

	.project {
		color: rgba(0, 0, 0, .5);
		margin-top: 20rpx;

	}

	.label {
		font-size: 26rpx;
		margin-right: 40rpx;
	}

	.detail {
		font-size: 26rpx;
		margin-right: 40rpx;
	}

	.view {
		float: right;
		margin-right: -30rpx;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);
	}
</style>
